<template>
  <div>
    <div class="Edit_Div1"></div>
    <div class="NameEditCls">
      <el-row>
        <el-col :span="24">
          <div>
            <el-button @click="$router.go(-1)" type="info" icon="el-icon-arrow-left" size="mini">返回</el-button>
          </div>
        </el-col>
      </el-row>
      <el-row class="borderRow">
        <el-col :span="24">
          <!-- 表单开始 -->
          <el-form ref="ProcessFrom" :rules="rules" :model="ProcessFrom" label-width="100px" label-position="top"
            :inline="true" size="small">
            <el-col :span="12">

              <!-- 类型下拉框 el-select-->
              <el-form-item label="类型" prop="TypeID">
                <el-select v-model="ProcessFrom.TypeID" placeholder="请选择" style="width:100%">
                  <el-option v-for="(item,index) in TypeList" :key="item.ID" :label="item.TypeName_CHS"
                    :value="item.ID">
                  </el-option>
                </el-select>
              </el-form-item>

              <!-- 描述 textarea -->
              <el-form-item label="描述" prop="Description">
                <el-input v-model="ProcessFrom.Description" type="textarea" :rows="5"></el-input>
              </el-form-item>

            </el-col>

            <el-col :span="12">

              <!-- 标题下文本框 -->
              <el-form-item label="标题" prop="Title">
                <el-input v-model="ProcessFrom.Title" style="width:100%"></el-input>
              </el-form-item>

            </el-col>

            <el-col :span="24">
              <el-form-item>
                <!-- 新增流程提交按钮 -->
                <el-button type="primary" size="small" icon="el-icon-check" @click="submit('ProcessFrom')">新增流程
                </el-button>
                <!-- 取消按钮 -->
                <el-button @click="$router.go(-1)" size="small" icon="el-icon-close" type="normal">取消</el-button>
              </el-form-item>
            </el-col>

          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.Edit_Div1 {
  height: 2px;
  background-color: rgb(180, 180, 180);
}
.borderRow {
  border-top: 1px solid #f7f7f7;
}
.NameEditCls {
  padding: 10px;
}
textarea {
  width: 95%;
  height: 130px;
  border: 1px solid #dcdfe6;
}
a {
  color: white;
  text-decoration: none;
}
.el-row {
  margin-bottom: 10px;
}
.el-form-item {
  width: 90%;
}
</style>

<script>
export default {
  data () {
    return {
      ProcessFrom: {
        TypeID: null,
        Description: null,
        Title: null
      },
      //添加修改bug修复
      SubmitLoading: false,
      rules: { // 表单验证规则
        TypeID: [
          { required: true, message: '请选择类型', trigger: 'blur' }
        ],
        Description: [
          { required: true, message: '请输入描述', trigger: 'blur' },
          { min: 1, max: 1000, message: '长度在1到1000个字符' }
        ],
        Title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
          { min: 1, max: 100, message: '长度在1到100个字符' }
        ],
      },
      TypeList: [],
    }
  },
  methods: {
    SelectTypeBinding () {
      this.$axios({
        url: '/HrApi/ProcessMange/SelectTypeBinding',
        method: 'GET',
      }).then(res => {
        this.TypeList = res.data.data;
      })
    },
    submit (ProcessFrom) {
      //表单验证
      this.SubmitLoading = true,
        this.$refs[ProcessFrom].validate((valid) => {
          if (!valid) {
            return false;
          }
          //执行请求
          this.$axios({
            url: '/HrApi/ProcessMange/AddProcessList',
            method: "POST",
            data: this.$Qs.stringify({
              Process: JSON.stringify(this.ProcessFrom),
              fk_User: this.$store.state.UserInfo.pk_User
            },
              {
                indices: false
              })
          }).then(res => {
            if (!res.data.code) {
              this.SubmitLoading = false,
                this.$message.success(res.data.msg);
              this.$refs[ProcessFrom].resetFields();
            } else {
              this.$message.error("失败");
            }
          })
        })
    }
  },
  mounted () {
    this.SelectTypeBinding();
  }
}
</script>